<template>
	<view class="note">
		<view class="note-section">
			<u-checkbox-group shape="circle" @change="checkboxGroupChange">
				<movable-area v-if="type==3" class="t-conversation-item-topall">
					<!-- t-conversation-item-all -->
					<movable-view class="t-conversation-item-top" direction="horizontal" @change="handleTouchMove"
						damping="100" :x="xScale">
						<view class="avatar-box">
							<label class="t-conversation-item-avatar-top">{{$t('project.select_all')}}</label>
						</view>
						<view class="t-conversation-item-content">

						</view>
						<view class="t-conversation-item-topinfo">
							<u-checkbox name="All"  v-model="allchecked"></u-checkbox>
						</view>
					</movable-view>
					<!-- <movable-view class="t-conversation-item" direction="horizontal" @change="handleTouchMove"
						damping="100" :x="xScale">
						<view class="avatar-box">
							<image class="t-conversation-item-avatar" ></image>
						</view>
						<view class="t-conversation-item-content">
							<label class="tui-conversation-item-name">全选</label>
						</view>
						<view class="t-conversation-item-info">
							<u-checkbox name=0 v-model="allchecked"></u-checkbox>
						</view>
					</movable-view> -->
				</movable-area>
				<movable-area v-if="JSON.parse(JSON.stringify(personMemberList)).length > 0" v-for="(item, index) in personMemberList" :key="index"
					class="t-conversation-item-container">
					<movable-view class="t-conversation-item" direction="horizontal" @change="handleTouchMove"
						damping="100" :x="xScale">
						<view class="avatar-box">
							<image class="t-conversation-item-avatar" v-if="item.AddAccAvatar" :src="item.AddAccAvatar"
								@error="handleImageError(index)"></image>
							<image class="t-conversation-item-avatar" v-else
								src="../../../../static/images/avatar.jpg"></image>
						</view>
						<view class="t-conversation-item-content">
							<label class="tui-conversation-item-name">{{item.AddAccName}}</label>
						</view>
						<view class="t-conversation-item-info">
							<u-checkbox :name="index" v-model="item.checked"
								:disabled="dictGroupMember[item.User] !== undefined"></u-checkbox>
						</view>
					</movable-view>
				</movable-area>

				<movable-area v-if="JSON.parse(JSON.stringify(groupMemberList)).length > 0" v-for="(item, index) in groupMemberList" :key="index"
					class="t-conversation-item-container">
					<movable-view class="t-conversation-item" direction="horizontal" @change="handleTouchMove"
						damping="100" :x="xScale">
						<view class="avatar-box">
							<image class="t-conversation-item-avatar" v-if="item.UserAvatar" :src="item.UserAvatar"
								@error="handleImageError(index)"></image>
							<image class="t-conversation-item-avatar" v-else
								src="../../../../static/images/avatar.jpg"></image>
						</view>
						<view class="t-conversation-item-content">
							<label class="tui-conversation-item-name">{{item.UserName}}</label>
						</view>
						<view class="t-conversation-item-info">
							<u-checkbox :name="index" v-model="item.checked"></u-checkbox>
						</view>
					</movable-view>
				</movable-area>

				<movable-area v-if="JSON.parse(JSON.stringify(groupMemberList)).length == 0" v-for="(item, index) in friendMemberList" :key="index"
					class="t-conversation-item-container">
					<movable-view class="t-conversation-item" direction="horizontal" @change="handleTouchMove"
						damping="100" :x="xScale">
						<view class="avatar-box">
							<image class="t-conversation-item-avatar" v-if="item.FriendAvatar" :src="item.FriendAvatar"
								@error="handleImageError(index)"></image>
							<image class="t-conversation-item-avatar" v-else
								src="../../../../static/images/avatar.jpg"></image>
						</view>
						<view class="t-conversation-item-content">
							<label class="tui-conversation-item-name">{{item.FriendName}}</label>
						</view>
						<view class="t-conversation-item-info">
							<u-checkbox :name="index" v-model="item.checked"
								:disabled="dictGroupMember[item.Friend] !== undefined"></u-checkbox>
						</view>
					</movable-view>
				</movable-area>

				<!--
					<view v-if="JSON.parse(JSON.stringify(groupMemberList)).length == 0" class="note-item u-flex"
					v-for="(item, index) in friendMemberList" :key="index">
					<view class="note-item_avatar">
						<u-image v-if="item.FriendAvatar" width="72rpx" height="72rpx" border-radius="72rpx"
							:src="item.FriendAvatar"></u-image>
						<u-image v-else width="72rpx" height="72rpx" border-radius="72rpx"
							src="/static/images/avatar.jpg"></u-image>
					</view>
					<view class="note-item_content u-flex u-flex-1 u-border-bottom">
						<view class="note-item_content--name u-flex-1">{{item.FriendName}}</view>
						<u-checkbox :name="index" v-model="item.checked" :disabled="dictGroupMember[item.Friend] !== undefined"></u-checkbox>
					</view>
				</view>
					<view v-if="JSON.parse(JSON.stringify(groupMemberList)).length > 0" class="note-item u-flex"
					v-for="(item, index) in groupMemberList" :key="index">
					<view class="note-item_avatar">
						<u-image v-if="item.UserAvatar" width="72rpx" height="72rpx" border-radius="72rpx"
							:src="item.UserAvatar"></u-image>
						<u-image v-else width="72rpx" height="72rpx" border-radius="72rpx"
							src="/static/images/avatar.jpg"></u-image>
					</view>
					<view class="note-item_content u-flex u-flex-1 u-border-bottom">
						<view class="note-item_content--name u-flex-1">{{item.UserName}}</view>
						<u-checkbox :name="index" v-model="item.checked"></u-checkbox>
					</view>
				</view> -->
			</u-checkbox-group>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-bottom="45" margin-top="45"
			color="#C1C0C0" />
		<view class="note-footer">
			<u-button type="success" @click="actAdd" v-if="type == 1">{{$t('chat.btn_add')}}</u-button>
			<u-button type="warning" @click="actDel" v-else-if="type == 2">{{$t('chat.btn_del')}}</u-button>
			<u-button type="primary" @click="actCall" v-else-if="type == 3">{{$t('chat.btn_confirm')}}</u-button>
			<u-button type="primary" @click="showComfirm" v-else>{{$t('chat.btn_confirm')}}</u-button>
		</view>
		<u-modal v-model="isComfirm" :title="$t('chat.chat_group_name')" :show-cancel-button="true" @confirm="actComfirm"
			:cancelText="$t('chat.btn_cancel')" :confirmText="$t('chat.btn_confirm')">
			<view class="slot-content">
				<u-input v-model="groupName" type="text" :border="true" :placeholder="$t('chat.notify_please_group_name')" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				xScale: 0,
				type: 0,
				gid: 0,
				pid: 0,
				allchecked:false,
				oldallchecked:0,
				oldlen:0,
				calltype:1,
				friendMemberList: [],
				groupMemberList: [],
				personMemberList: [],
				dictGroupMember: [],
				memberList: [],
				TIM: null,
				groupName: '',
				groupCheckBoxIds: [],
				OldgroupCheckBoxIds:[],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: this.$t('mine.pull_up'),
					loading: this.$t('mine.loading'),
					nomore: this.$t('mine.note_no_more')
				},
				isComfirm: false,
				navigationBarTitle: '',
			}
		},

		onLoad(option) {
			this.gid = option.gid || 0;
			this.pid = option.pid || 0;
			this.type = option.type || 0;
			this.calltype = option.calltype||0;
			console.log("this,type", this.type);
			if (option.title && option.title != '') {
				this.navigationBarTitle = option.title;
				uni.setNavigationBarTitle({
					title: this.navigationBarTitle
				});
			} else {
				uni.setNavigationBarTitle({
					title: this.$t('chat.chat_group_new')
				});
			}
			let groupMemberList = JSON.parse(option.groupMemberList || '[]');
			for (var i = 0; i < groupMemberList.length; i++) {
				this.dictGroupMember[groupMemberList[i].User] = 1;
			}
			this.memberList = groupMemberList;
			this.loaded();
		},
		onShow() {},
		components: {},
		computed: {
			i18n() {
				return this.$t('chat')
			}
		},
		methods: {
			loaded() {
				if (this.pid > 0) {
					uni.showLoading({
						title: 'Loading...'
					});
					this.$http.get('/mgr/biz/person/list', {
						pid: this.pid,
					}).then(res => {
						this.personMemberList = res;
						console.log("personMemberList", this.personMemberList)
						let idx = 0;
						for (var i = 0; i < this.personMemberList.length; i++) {
							if (this.personMemberList[i].User == this.$store.state.vuex_user.uid) {
								idx = i;
							}
							if (this.dictGroupMember[this.personMemberList[i].User] !== undefined) {
								this.personMemberList[i].checked = true;
							}
						}
						this.personMemberList.splice(idx, 1);
						uni.hideLoading();
					});
				} else {
					if (this.type == 2||this.type==3) {
						this.getGroupMemberList();
					} else {
						this.getUserFriendList();
					}
				}
			},
			getGroupMemberList() {
				this.$http.get('/mgr/user/group/member/list/data', {
					gid: this.gid,
					user_id: this.$store.state.vuex_user.uid,
				}).then(res => {
					this.groupMemberList = res.groupMemberList;
				});
			},
			getUserFriendList() {
				this.$http.get('/mgr/user/friend/data', {}).then(res => {
					this.friendMemberList = res;
					for (var i = 0; i < this.friendMemberList.length; i++) {
						if (this.dictGroupMember[this.friendMemberList[i].Friend] !== undefined) {
							this.friendMemberList[i].checked = true;
						}
					}
				});
			},
			checkboxGroupChange(e) {
				//console.log("===========",JSON.stringify(e))
				this.groupCheckBoxIds = e;
				var len  = this.groupCheckBoxIds.length;
				// if (this.groupCheckBoxIds.length>0){
				// 	console.log("=====allchecked======",this.groupCheckBoxIds[len-1]);
				// }
				if (this.type == 3){
					if (len>0){
						// console.log(this.oldlen+"====="+len+"======"+this.oldallchecked+"-------------:"+this.groupCheckBoxIds.indexOf("All")+"++++++++"+this.groupCheckBoxIds[len-1])

						if(this.oldlen>=len){
							if(this.groupCheckBoxIds.indexOf("All")==-1 && this.oldallchecked==1){//点击了取消全选
								//if(this.groupCheckBoxIds.length!=0){
									// console.log("======进了取消全选=====",JSON.stringify(e))
									for(var i = 0;i<this.groupMemberList.length;i++){
										this.groupMemberList[i].checked = false
									}
									this.groupCheckBoxIds=[];
									this.oldallchecked=0
									this.oldlen = 0
								//}
							}
						}else if(this.groupCheckBoxIds[len-1]=="All"){//点击了全选
							this.oldallchecked = 1;
							if(this.groupMemberList.length>0){
								this.groupCheckBoxIds.length = 0;
								//this.groupCheckBoxIds=[];
								var k = 0
								for(var i = 0;i<this.groupMemberList.length;i++){
									if(i<7){
										k++
										this.groupCheckBoxIds.push(i);
										this.groupMemberList[i].checked = true
									}else{
										this.groupMemberList[i].checked = false
									}
								}
								if (k>6){
									uni.showToast({
										title: this.$t('chat.max7_members'),
										icon: 'none'
									});
								}

							}
							this.oldlen = 8;
							//this.oldallchecked = 1;
						}else{
							// console.log("======进了=====",JSON.stringify(this.groupCheckBoxIds[len-1]))
							this.oldlen = len;
							if(this.oldallchecked==1){ //含all的 增加点击
								if(this.groupCheckBoxIds.length>7){
									var num = this.groupCheckBoxIds[this.groupCheckBoxIds.length-2];
									if (num=="All"){
										// console.log("=====2======",num)
										num = this.groupCheckBoxIds[this.groupCheckBoxIds.length-3];
										this.groupCheckBoxIds.splice(-3,1);
										// console.log("=====22======",JSON.stringify(this.groupCheckBoxIds))
										this.oldlen =8
										uni.showToast({
											title: this.$t('chat.max7_members'),
											icon: 'none'
										});
										this.groupMemberList[num].checked = false
									}else{
										// console.log("=====1======",num)
										//e.checked = false
										//this.groupMemberList[num].checked = false
										this.groupCheckBoxIds.splice(-2,1);
										// console.log("=====22222======",JSON.stringify(this.groupCheckBoxIds))
										this.oldlen =8
										// e.splice(-1,1)
										uni.showToast({
											title: this.$t('chat.max7_members'),
											icon: 'none'
										});
										this.groupMemberList[num].checked = false
									}
								}
							}else if(this.oldallchecked==0){ //不含含all的 增加点击
								if(this.groupCheckBoxIds.length>6){
									var num = this.groupCheckBoxIds[6];
									// console.log("======0=====",num)
									//e.checked = false
									//this.groupMemberList[num].checked = false
									this.groupCheckBoxIds.splice(-1,1);
									this.oldlen =7
									// e.splice(-1,1)
									uni.showToast({
										title: this.$t('chat.max7_members'),
										icon: 'none'
									});
									this.groupMemberList[num].checked = false
								}
							}
						}
					}

				}
			},
			tabChange(index) {
				this.current = index;
			},
			onNavigationBarButtonTap(e) {
				this.$u.route({
					type: 'back',
					delta: 1
				})
			},
			showComfirm() {
				if (this.groupCheckBoxIds.length == 0) {
					uni.showToast({
						title: this.$t('chat.select_friend'),
						icon: 'none'
					});
					return;
				}
				this.isComfirm = true;
			},
			actComfirm() {
				let that = this;
				if (that.groupCheckBoxIds.length == 0) {
					uni.showToast({
						title: this.$t('chat.select_friend'),
						icon: 'none'
					});
					return;
				}
				if (that.groupName == '') {
					uni.showToast({
						title: that.$t('chat.notify_please_group_name'),
						icon: 'none'
					});
					return;
				}
				let memberIds = [];
				that.groupCheckBoxIds.forEach(function(idx) {
					if (that.pid > 0) {
						memberIds.push(that.personMemberList[idx].User);
					} else {
						memberIds.push(that.friendMemberList[idx].FriendTimUserId);
					}
				});
				that.createGroup(memberIds);
			},
			createGroup(memberIds) {
				let that = this;
				let data = {
					group_name: this.groupName,
					member_ids: memberIds,
					pid: this.pid,
				};
				let memberList = [];
				memberList.push({
					userID: this.$store.state.vuex_user.uid,
					role: 'Admin'
				});
				memberIds.forEach(function(id) {
					memberList.push({
						userID: id
					});
				});
				this.$http.post('/mgr/user/group/create', data).then(res => {
					uni.showToast({
						title: that.$t('chat.notify_add_group_success')
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				});
			},
			actCall(){
				let that = this;
				let userIds = [];
				that.groupCheckBoxIds.forEach(function(idx) {
					 if(userIds.length<=6){
						 userIds.push(that.groupMemberList[idx].User.toString())
					 }
				});
			  if (userIds.length > 0) {
				uni.$TUICallKit.groupCall({
					  groupID: that.gid,
					  userIDList: userIds,
					  callMediaType: this.calltype
					},(res) => {
					  console.log(JSON.stringify(res));
					  setTimeout(function() {
					  	uni.navigateBack({
					  		delta: 1
					  	});
					  }, 1000);
					}
				);
			  }
			},
			actAdd() {
				let that = this;
				let addGroupUserIds = [],
					dict = [];
				for (var i = 0; i < this.memberList.length; i++) {
					dict[this.memberList[i].User] = 1;
				}
				if (that.pid > 0) {
					that.groupCheckBoxIds.forEach(function(idx) {
						let userId = that.personMemberList[idx].User || 0;
						if (userId > 0 && dict[userId] === undefined) {
							addGroupUserIds.push(userId);
						}
					});
				} else {
					that.groupCheckBoxIds.forEach(function(idx) {
						let userId = that.friendMemberList[idx].Friend || 0;
						if (userId > 0 && dict[userId] === undefined) {
							addGroupUserIds.push(userId);
						}
					});
				}
				if (addGroupUserIds.length == 0) {
					uni.showToast({
						title: this.$t('chat.select_friend'),
						icon: 'none',
					})
					return;
				}

				let data = {
					gid: that.gid,
					member_ids: addGroupUserIds,
					pid: that.pid || 0,
				};
				that.$http.post('/mgr/user/group/member/add', data).then(res => {
					uni.showToast({
						title: that.$t('chat.notify_add_success'),
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				});
			},
			actDel() {
				let that = this;
				let addGroupUserIds = [];
				that.groupCheckBoxIds.forEach(function(idx) {
					let userId = that.groupMemberList[idx].User || 0;
					if (userId > 0) {
						addGroupUserIds.push(userId.toString());
					}
				});
				if (addGroupUserIds.length == 0) {
					uni.showToast({
						title: this.$t('chat.select_friend'),
						icon: 'none',
					})
					return;
				}

				let data = {
					gid: that.gid,
					member_ids: addGroupUserIds
				};
				console.log(that.$t('chat.notify_del_success'))
				 that.$http.post('/mgr/user/group/member/delete', data).then(res => {
					uni.showToast({
						title: that.$t('chat.notify_del_success'),
				    icon: 'none',
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				});
			},
			handleTouchMove(e) {
				console.log("---------------ee-------------",JSON.stringify(e));
				if (!this.lock) {
					this.last = e.detail.x;
					this.lock = true;
				}

				if (this.lock && e.detail.x - this.last < -5) {
					this.setData({
						xScale: -75
					});
					setTimeout(() => {
						this.lock = false;
					}, 2000);
				} else if (this.lock && e.detail.x - this.last > 5) {
					this.setData({
						xScale: 0
					});
					setTimeout(() => {
						this.lock = false;
					}, 2000);
				}
			},
			handleImageError(index) {
				console.log(" 进来这里了")
				console.log("this.groupMemberList[index]", this.groupMemberList[index])
				if (this.groupMemberList[index] !== undefined) {
					this.groupMemberList[index].UserAvatar = '../../../../static/images/avatar.jpg';
				}
				if (this.friendMemberList[index] !== undefined) {
					this.friendMemberList[index].FriendAvatar = '../../../../static/images/avatar.jpg';
				}
				if (this.personMemberList[index] !== undefined) {
					this.personMemberList[index].AddAccAvatar = '../../../../static/images/avatar.jpg';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.css";

	.note {
		padding-bottom: 88rpx;
	}

	.note-section {
		margin-bottom: 24rpx;
	}

	.u-checkbox-group {
		width: 100%;
	}

	.note-item {
		width: 100%;
		background-color: #fff;
		height: 106rpx;
		padding: 0 24rpx 0 18rpx;

		&_avatar {
			position: relative;
			margin-right: 24rpx;
		}

		&_content {
			height: 100%;

			&--name {
				font-size: 32rpx;
			}

			&--text {
				font-size: 24rpx;
				color: #949C9E;
			}

			.u-checkbox__label {
				display: none;
			}
		}

		&_time {
			font-size: 24rpx;
			height: 76rpx;
			color: #949C9E;
		}
	}

	.note-footer {
		z-index: 999;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx 140rpx;
	}

	.slot-content {
		padding: 30rpx;
		margin-bottom: 10rpx;
	}
</style>
